<template>
  <CDialog
    :title="props.title || formState.supplierName"
    :descText="readonly ? '' : `零部件编码：${props.nodeCode}`"
    v-model:visible="dialogVisible"
    :loading="loading"
    @confirm="handleConfirm"
    @cancel="dialogVisible = false"
    size="small"
    v-bind="footerBind"
  >
    <div class="g-flex g-mt5">
      <div class="g-font-14n3">碳足迹因子值：</div>
      <div class="g-ml12 g-font-14n2">{{ formState.factor }} {{ formState.factorUnit }}</div>
    </div>
    <div class="g-flex g-mt10">
      <div class="g-font-14n3">认证机构：</div>
      <div class="g-ml12 g-font-14n2">{{ empty(formState.certificationOrgName) }}</div>
    </div>
    <div class="g-flex g-mt10">
      <div class="g-font-14n3">认证报告：</div>
      <div class="g-ml12 g-font-14n2">
        <template v-if="formState.reportName">
          <CIcon type="c-xian-putongwenjian"></CIcon>
          <span class="g-ml10 right-file" @click="handleDownload()">{{
            formState.reportName
          }}</span>
        </template>
        <span v-else>-</span>
      </div>
    </div>
  </CDialog>
</template>

<script lang="ts" setup>
import { withDefaults, defineProps, defineEmits, computed, watch, reactive, ref } from 'vue';
import { CDialog } from '@/components/CDialog';
import { getSupplierFactor, replaceForm } from '@/apis/pcf/supplier/supplierList';
import { useMessage } from '@/hooks/useMessage';
import { empty } from '@/utils';
import { getBomProductionData } from '@/apis/pcf/myModel/modelDetail';

interface MaterialDialogProps {
  visible: boolean;
  formNo: string;
  nodeNo: string;
  nodeCode?: string;
  readonly?: boolean;
  title: string;
}
const props = withDefaults(defineProps<MaterialDialogProps>(), {});
const emits = defineEmits(['update:visible', 'refresh']);
const { createMessage } = useMessage();
const dialogVisible = computed({
  get: () => {
    return props.visible;
  },
  set: (value: boolean) => {
    emits('update:visible', value);
  }
});
watch(
  () => dialogVisible.value,
  val => {
    if (val) {
      getData(props.nodeNo);
    }
  }
);

const loading = ref(false);
/**
 * 表单内容
 */
const formState = reactive({
  supplierName: '',
  factor: '',
  factorUnit: '',
  certificationOrgName: '',
  reportName: '',
  reportUrl: '',
  dataYear: ''
});

const footerBind = computed(() => {
  if (props.readonly) {
    return {
      showCancelButton: false,
      confirmText: '我知道了'
    };
  }
  return {
    confirmText: '替换',
    cancelText: '返回'
  };
});
/**
 * 获取因子详情
 */
async function getData(nodeNo: string) {
  try {
    loading.value = true;
    if (props.readonly) {
      const { supplierFactor } = await getBomProductionData(nodeNo);
      formState.factor = supplierFactor?.factor;
      formState.supplierName = supplierFactor?.supplierName;
      formState.factorUnit = supplierFactor?.factorUnit;
      formState.certificationOrgName = supplierFactor?.certificationOrg;
      formState.reportName = supplierFactor?.attachmentName;
      formState.reportUrl = supplierFactor?.attachmentUrl;
    } else {
      const res = await getSupplierFactor(props.formNo);
      formState.factor = res.factor;
      formState.factorUnit = res.factorUnit;
      formState.certificationOrgName = res.certificationOrgName;
      formState.reportName = res.reportName;
      formState.reportUrl = res.reportUrl;
    }

    loading.value = false;
  } catch (error) {
    console.log('error', error);
    loading.value = false;
  }
}

/**
 * 保存按钮
 */
function handleConfirm() {
  console.log('handleConfirm');
  if (props.readonly) {
    dialogVisible.value = false;
  } else {
    submitReplaceReq();
  }
}

/**
 * 接口请求
 */
async function submitReplaceReq() {
  console.log('submitReplaceReq');
  try {
    await replaceForm(props.nodeNo, props.formNo);
    createMessage.success('替换成功！');
    emits('refresh', props.nodeNo);
    dialogVisible.value = false;
  } catch (error) {
    console.log('error', error);
    loading.value = false;
  }
}

const handleDownload = () => {
  if (formState.reportUrl) {
    window.open(formState.reportUrl);
  } else {
    createMessage.warning('文件地址不存在！');
  }
};
</script>

<style lang="scss" scope>
.right-file {
  cursor: pointer;
  &:hover {
    color: $themeColor;
  }
}
</style>
